<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
    <script src="./citytest.js"></script>
    <style>
      .content {
        height: 500px;
        overflow: auto;
      }
      button {
        margin: 5px;
      }
      .active {
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2 @click="maskFlag=true">{{cityRes||"全国"}}</h2>
      <div class="mask" v-show="maskFlag">
        <div class="content">
          <ul>
            <li v-for="(cityList,letter) in cityData">
              <h4>{{letter}}</h4>
              <div>
                <button
                  v-for="item in cityList"
                  :class="{active:item.name==cityTemp}"
                  @click="cityTemp=item.name"
                >
                  {{item.name||"全国"}}
                </button>
              </div>
            </li>
          </ul>
        </div>
        <button @click="cityRes=cityTemp,maskFlag=false">确认</button>
        <button @click="cityTemp=cityRes,maskFlag=false">取消</button>
      </div>
    </div>
  </body>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          cityRes: "", //选择结果
          maskFlag: true, //控制弹窗的显示隐藏
          cityTemp: "", //临时的选择结果
          cityData,
        };
      },
    });
    app = app.mount("#app");
  </script>
</html>
